<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>紫色鹭</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/css/ready.css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style-zj.css">
</head>
<body>
<div class="wrapper" id="app">
    <div class="main-header">
        <div class="logo-header">
            <a href="index.html" class="logo">
                紫色鹭后台管理
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse"
                    data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
        </div>
        <nav class="navbar navbar-header navbar-expand-lg">
            <div class="container-fluid">
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li class="nav-item dropdown">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <img src="assets/img/profile.jpg" alt="user-img" width="36"
                                 class="img-circle"><span id="username"></span></span> </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a class="dropdown-item loginOut" href="#"><i class="fa fa-power-off"></i>退出登录</a>
                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="sidebar">
        <div class="scrollbar-inner sidebar-wrapper">
            <ul class="nav">
                <li class="nav-item">
                    <a href="index.html">
                        <i class="la la-dashboard"></i>
                        <p>首页轮播管理</p>
                    </a>
                </li>
                <li class="nav-item active">
                    <a href="user-admin.html">
                        <i class="la la-table"></i>
                        <p>用户管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="class.html">
                        <i class="la la-keyboard-o"></i>
                        <p>商品分类管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="admin_brand.html">
                        <i class="la la-th"></i>
                        <p>入驻品牌管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="store-pass.html">
                        <i class="la la-bell"></i>
                        <p>店铺审核管理</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="brand-pass.html">
                        <i class="la la-bell"></i>
                        <p>品牌审核管理</p>
                    </a>
                </li>
                <!--<li class="nav-item">-->
                <!--<a href="typography.html">-->
                <!--<i class="la la-font"></i>-->
                <!--<p>Typography</p>-->
                <!--</a>-->
                <!--</li>-->
                <!--<li class="nav-item">-->
                <!--<a href="icons.html">-->
                <!--<i class="la la-fonticons"></i>-->
                <!--<p>Icons</p>-->
                <!--</a>-->
                <!--</li>-->
            </ul>

        </div>
    </div>
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">用户管理</div>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th scope="col">手机号</th>
                                <th scope="col">账号</th>
                                <th scope="col">创建时间</th>
                                <th scope="col">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item,index) in list">
                                <td>{{item.phone}}</td>
                                <td>{{item.username}}</td>
                                <td>{{item.crtTime}}</td>
                                <td>
                                    <button class="btn btn-success block" @click="openOrder(item.token)" data-toggle="modal" data-target="#modalUpdate">订单信息</button>
                                    <button class="btn btn-danger block" v-if="item.storeId" @click="openStore(item.storeId)" data-toggle="modal" data-target="#storeInfo">店铺信息</button>
                                    <button class="btn btn-info block" v-if="item.authenticationId"  @click="openAuth(item.authenticationId)" data-toggle="modal" data-target="#authInfo">加盟信息</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div id="page1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="modalUpdatePro" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h6 class="modal-title">订单信息</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body text-c">
                    <div class="mart-23" style="margin-bottom: 10px;">
                        <table class="table-show">
                            <thead>
                            <tr class="data-list">
                                <th class="td-w1">货品</th>
                                <th class="td-w2">单价</th>
                                <th class="td-w3">数量</th>
                                <th class="td-w4">实付款（元）</th>
                                <th class="td-w5">订单状态</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="data-list">
                        <div class="list" v-for="items in orderInfo">
                            <div class="top">
                                <!--<span class="icon_checkbox marr-7"></span>-->
                                <span>订单号：</span>
                                <span class="marr-35">{{items.id}}</span>
                                <span>下单时间：</span>
                                <span>{{items.crtTime}}</span>
                                <div class="fr store_name">
                                    <span class="icon_store v-tt marr-13"></span>
                                    <span>{{items.storeName}}</span>
                                </div>
                            </div>
                            <table>
                                <tbody>
                                <tr v-for="item in items.commodties">
                                    <td class="td-w1 text-l">
                                        <div class="img-png">
                                            <img v-for="(it,index) in item.picUrl" v-if="index == 0" :src="imgBaseUrl + it" alt="">
                                        </div>
                                        <span class="img-text">{{item.commodityName}}</span>
                                    </td>
                                    <td class="td-w2">¥{{item.retailPrice}}</td>
                                    <td class="td-w3">{{item.count}}</td>
                                    <td class="td-w4">
                                        <div class="col-red1">¥{{item.marketPrice}}</div>
                                        <!--<div>(含运费100)</div>-->
                                    </td>
                                    <td class="col-red1 td-w5">
                                        <span v-if="items.state == 1">待付款</span>
                                        <span v-if="items.state == 2">待发货</span>
                                        <span v-if="items.state == 3">待确认收货</span>
                                        <span v-if="items.state == 4">交易成功</span>
                                        <span v-if="items.state == 5">交易关闭</span>
                                        <span v-if="items.state == 6">已评价</span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="no-list" v-if="orderInfo.length == 0">—— 暂无数据 ——</div>
                    </div>

                </div>
                <div class="modal-footer">
                    <div id="test1"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="storeInfo" tabindex="-1" role="dialog" aria-labelledby="modalUpdatePro" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h6 class="modal-title">店铺信息</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body text-c">
                    <table class="table table-head-bg-success">
                        <tr>
                            <td>个人姓名：</td>
                            <td>{{storeInfo.name}}</td>
                        </tr>
                        <tr>
                            <td>所属地区：</td>
                            <td>{{storeInfo.area}}</td>
                        </tr>
                        <tr>
                            <td>联系电话：</td>
                            <td>{{storeInfo.phone}}</td>
                        </tr>
                        <tr>
                            <td>QQ：</td>
                            <td>{{storeInfo.qq}}</td>
                        </tr>
                    </table>

                </div>
                <!--<div class="modal-footer">-->
                    <!--<div id="test1"></div>-->
                <!--</div>-->
            </div>
        </div>
    </div>
    <div class="modal fade" id="authInfo" tabindex="-1" role="dialog" aria-labelledby="modalUpdatePro" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h6 class="modal-title">店铺信息</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body text-c">
                    <table class="table table-head-bg-success">
                        <tr>
                            <td>企业名称</td>
                            <td>{{authInfo.name}}</td>
                        </tr>
                        <tr>
                            <td>联系人</td>
                            <td>{{authInfo.contacts}}</td>
                        </tr>
                        <tr>
                            <td>电话</td>
                            <td>{{authInfo.mobile}}</td>
                        </tr>
                        <tr>
                            <td>手机号</td>
                            <td>{{authInfo.phone}}</td>
                        </tr>
                        <tr>
                            <td>邮箱</td>
                            <td>{{authInfo.eMail}}</td>
                        </tr>
                        <tr>
                            <td>门店地址</td>
                            <td>{{authInfo.province}}{{authInfo.city}}{{authInfo.district}}{{authInfo.address}}</td>
                        </tr>
                        <tr>
                            <td>门店照片</td>
                            <td>
                                <img :src="imgBaseUrl + item" alt="" v-for="item in authInfo.payCertificateUrl" class="pic">
                            </td>
                        </tr>
                        <tr>
                            <td>营业执照</td>
                            <td>
                                <img :src="imgBaseUrl + authInfo.businessLicensePicUrl" alt="" class="pic" v-if="authInfo">
                            </td>
                        </tr>
                        <tr>
                            <td>工商注册号</td>
                            <td>{{authInfo.businessLicenseNo}}</td>
                        </tr>
                        <tr v-if="authInfo.type == 3">
                            <td>企业人数</td>
                            <td>{{authInfo.num}}</td>
                        </tr>
                        <tr v-if="authInfo.type == 3">
                            <td>主修车型</td>
                            <td>{{authInfo.majorModel}}</td>
                        </tr>
                        <tr v-if="authInfo.type == 3">
                            <td>服务项目</td>
                            <td>{{authInfo.serviceName}}</td>
                        </tr>
                    </table>

                </div>
                <!--<div class="modal-footer">-->
                    <!--<div id="test1"></div>-->
                <!--</div>-->
            </div>
        </div>
    </div>


</div>
<!-- Modal -->
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="js/config.js"></script>
<script type="text/javascript">
    var limit = 10;
    var offset = 1;
    var count;
    var order_limit = 10;
    var order_offset = 1;
    var order_count;
    var orderToken;
    var app = new Vue({
        el: '#app',
        data: {
            list:'',
            storeInfo:'',
            authInfo:'',
            imgBaseUrl:imgBaseUrl,
            orderInfo:"",
        },
        methods: {
            toDelete:function (id) {
                get_ajax("/sys/user/del",{id:id},function (data) {
                    location.reload()
                })
            },
            openStore:function (id) {
                get_ajax("/sys/store/view",{id:id},function (data) {
                    app.storeInfo = data;
                    $(".storeInfo").show().siblings().hide();
                })
            },
            openAuth:function (id) {
                get_ajax("/sys/authentication/findAuthenticationInfoById", {id: id}, function (data) {
                    data.payCertificateUrl = data.payCertificateUrl.split(",");
                    app.authInfo = data;
                    $(".authInfo").show().siblings().hide();
                });
            },
            openOrder:function (token) {
                orderToken = token;
                $.post(baseUrl+"/sys/order/getMyPage", {Token: orderToken,limit:order_limit,offset:order_offset,}, function (data) {
                    data.data.forEach(function (items) {
                        items.commodties.forEach(function (item) {
                            item.picUrl?item.picUrl = item.picUrl.split(","):'';
                        })
                    })
                    app.orderInfo = data.data;
                    order_count = data.count;
                    $(".orderInfo").show().siblings().hide();
                    layui.use(['layer','laypage'], function () {
                        console.log(order_count)
                        var laypage = layui.laypage;
                        laypage.render({
                            elem: 'test1',
                            count: order_count,
                            limit: order_limit,
                            jump:function (obj, first) {
                                //当前页数
                                order_offset = obj.curr;
                                if(!first){
                                    getOrder();
                                }
                            }
                        });
                    })
                });
            },
        },

        beforeCreate: function () {
            var that = this;

        },

    });

    $(".sure").click(function () {
        var username = $("#username").val();
        var password = $("#password").val();
        var phone = $("#phone").val();
        var email = $("#email").val();
        if(!username){
            alert("请填写用户名！");
            return
        }
        if(!password){
            alert("请填写密码！");
            return
        }
        if(!phone){
            alert("请填写手机号！");
            return
        }
        get_ajax("/sys/user/add",{username:username,password:password,phone:phone,email:email},function (data) {
            location.reload();
        })

    })

    function initPage() {
        get_ajax("/sys/user/getUserPage",{limit:limit,offset:offset},function (data) {
            app.list = data;
        })
    }

    get_ajaxPage("/sys/user/getUserPage", {
        limit: limit,
        offset: offset,
    }, function (data) {
        app.list = data.data;
        count = data.count;
        layui.use(['layer','laypage'], function () {
            var laypage = layui.laypage;
            laypage.render({
                elem: 'page1',
                count: count,
                limit: limit,
                jump:function (obj, first) {
                    //当前页数
                    offset = obj.curr;
                    if(!first){
                        initPage();
                    }
                }
            });
        })
    })



    function getOrder() {
        $.post(baseUrl+"/sys/order/getMyPage", {Token: orderToken,limit:order_limit,offset:order_offset,}, function (data) {
            data.data.forEach(function (items) {
                items.commodties.forEach(function (item) {
                    item.picUrl?item.picUrl = item.picUrl.split(","):'';
                })
            })
            app.orderInfo = data.data;
        });
    }
</script>
</html>